<template>
  <view class="msg-step">
    <block v-for="(item, index) in steps" :key="index">
      <view class="msg-step-item" v-if="item.planStatus != 7">
        <view class="left">
          <view class="icon"
            ><view
              class="circle"
              :class="{ 'error-circle': item.planStatus == 8 }"
              :style="{
                borderColor: item.planStatus == 8 ? '#E02020' : '#0091ff',
              }"
            ></view
          ></view>
          <view class="line" v-if="index != steps.length - 1 || finish"></view>
        </view>
        <view class="content">
          <view
            class="content-title"
            :class="{ 'error-text': item.planStatus == 8 }"
          >
            <view class="typeName"
              ><text v-if="item.executor">{{
                item.executor
              }}</text
              ><text >{{ item.typeName }}</text></view>
            <view class="time" v-if="![8, 9].includes(item.planStatus)">
              <text :style="{ color: resDataNameColor(item.auditStatusName) }"
                >{{ item.auditStatusName }}
              </text>
            </view>
          </view>
          <!-- 
				<view class="content-user" v-if="item.userName">
					<view class="content-user-head">
						<text>{{ getHead(item.userName) }}</text>
					</view>
					<view class="content-user-name">
						<text :style="{color:resDataNameColor(item.auditStatusName)}">{{item.auditStatusName}} </text>
					</view>
				</view> -->
          <view
            class="content-tips"
            :style="{ color: item.planStatus == 8 ? '#E02020' : '#666666' }"
            v-if="item.ext"
          >
            <div class="label">
              {{
                item.auditStatusName === "审核不通过"
                  ? "终止原因"
                  : item.auditStatusName === "审核退回"
                  ? "退回理由"
                  : "审核意见"
              }}:
            </div>
            <div class="val">
              {{ item.ext.remark || item.ext.comment || item.ext.expDesc || "无" }}
            </div>
          </view>
          <view class="content-times" v-if="item.createTime">
            <view class="icon"
              ><image src="../../../static/images/times.png"></image
            ></view>
            <view
              ><text>{{ item.createTime }}</text></view
            >
          </view>
        </view>
      </view>

      <view class="msg-step-item" v-else>
        <view class="left">
          <view class="icon"
            ><image src="/static/images/finish.png"></image
          ></view>
        </view>
        <view class="content">
          <view class="content-title end">审核结束</view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
	name: 'msg-step',
	props: {
		steps: {
			// 进度列表
			type: Array,
			default: () => {
				return [];
			},
		},
		finish: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {};
	},
	methods: {
		// 截取用户名后两位
		getHead(str) {
			if (!str) {
				return '';
			} else {
				return str.slice(-2);
			}
		},
		resDataNameColor(name) {
			let colors = [
				{ name: '发起', colorName: '#F7B500' },
				{ name: '审核中', colorName: '#0091FF' },
				{ name: '审核不通过', colorName: '#E02020' },
				{ name: '审核通过', colorName: '#55A302' },
				{ name: '撤回', colorName: '#999999' },
				{ name: '审核退回', colorName: '#FA6400' },
			];
			let index = colors.findIndex((item) => item.name === name);
			if (index != -1) {
				return colors[index].colorName;
			}
			return '';
		},

		// 转换日期格式
		getTimeStr(d) {
			const setZreo = (num) => {
				return num > 9 ? num : '0' + num;
			};
			if (!d) {
				return '';
			}
			let date = new Date(d.replace(/-/g, '/'));
			// const year = date.getFullYear();
			const month = setZreo(date.getMonth() + 1);
			const day = setZreo(date.getDate());
			const hour = setZreo(date.getHours());
			const minute = setZreo(date.getMinutes());
			// const second = setZreo(date.getSeconds());
			return month + '/' + day + ' ' + hour + ':' + minute;
		},
	},
};
</script>

<style lang="scss">
.msg-step {
  width: 100%;
  line-height: 35rpx;
  padding-top: 25rpx;
  &-item {
    min-height: 140rpx;
    display: flex;
    color: #333;
    .left {
      width: 40rpx;
      text-align: center;
      // background-color: #ebebeb;
      display: flex;
      flex-direction: column;
      position: relative;
      .icon {
        width: 100%;
        height: 35rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        .circle {
          width: 14rpx;
          height: 14rpx;
          background: #ffffff;
          border: 2rpx solid #0091ff;
          border-radius: 50%;
        }
        image {
          width: 32rpx;
          height: 32rpx;
        }
      }
      .line {
        width: 1rpx;
        height: 100%;
        position: absolute;
        bottom: -16rpx;
        left: calc(50% - 1rpx);
        z-index: 8;
        background-color: #0091ff;
      }
    }
    .content {
      flex: 1;
      padding-bottom: 30rpx;
      padding-left: 10rpx;
      &-title {
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        //align-items: center;
        .time {
          font-size: 24rpx;
          color: #999;
          white-space: nowrap;
          text {
            // color: #16bf99;
            margin-right: 3rpx;
          }
        }
        .typeName {
          font-weight: 500;
		text:nth-child(1){
			color: #0091ff;
			margin-right: 10rpx
		}
        }
      }
      &-user {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        margin: 15rpx 0;
        &-head {
          color: #fff;
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          text-align: center;
          font-size: 21rpx;
          line-height: 46rpx;
          margin-right: 12rpx;
          background-color: #0091ff;
          overflow: hidden;
          text {
            width: 78rpx;
            display: block;
            margin-left: -14rpx;
            overflow: hidden;
          }
        }
        &-name {
          flex: 1;
        }
      }

      &-tips {
        color: #666666;
        font-size: 24rpx;
        padding: 12rpx 0;
        //background-color: #F6F6F6;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        flex-wrap: wrap;
        .label {
          margin-right: 12rpx;
        }
        .val {
          flex: 1;
        }
      }
      &-times {
        margin-top: 12rpx;
        font-size: 28rpx;
        //background-color: #F6F6F6;
        display: flex;
        align-items: center;
        color: #666666;
        .icon {
          display: flex;
          align-items: center;
        }
        image {
          width: 28rpx;
          height: 28rpx;
        }
        text {
          color: #666;
          margin-left: 8rpx;
        }
      }
    }
	.end{
		color: #0091ff;
	}
  }
  &-item:last-child {
    min-height: auto;
    .content {
      padding-bottom: 0;
    }
    .icon {
      .circle {
        background: #0091ff;
      }
    }
  }
}
.error-text {
  color: #e02020;
}
.error-circle {
  background: #ffffff !important;
}
</style>
